<template>
  <div>
    <img class="dt" src="../../assets/img_chanpin/datu.jpg" alt="">
    <div class="conte">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="mbx">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>产品</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 糕点系列 -->
      <div class="gaodian">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/gdxl.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li >
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="http://www.daoxiangcun.cn/UpLoadFile/Images/2017/1/10/950308372457653a-1_cut1200662.jpg">
            <div class="touming">
              <p class="biaoti">枣花酥</p>
              <p class="neirong">传统工艺，花式酥皮，皮馅分明，内馅以精选优质红枣为基料而制成，入口酥松细软，枣香味芳香浓郁！</p>
              <div class="qingjin" @click="$router.push('/home/cpxq/'+1)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/gdxlcp2.jpg" alt="">
            <div class="touming">
              <p class="biaoti">牛舌饼</p>
              <p class="neirong">口感酥松绵软，馅心细腻油润，味道醇美。</p>
              <div class="qingjin" @click="$router.push('/home/cpxq/'+3)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/gdxlcp3.jpg" alt="">
            <div class="touming">
              <p class="biaoti">黑麻椒盐饼</p>
              <p class="neirong">饼皮金黄，饼面沾满黑芝麻，粒粒饱满，麻香四溢，口口留香，层层酥脆，咸甜......</p>
              <div class="qingjin" @click="$router.push('/home/cpxq/'+4)">
                <a>请进</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 休闲食品 -->
      <div class="xiuxianshipin">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/xxsp.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/xxspcp1.jpg" alt="">
            <div class="touming">
              <p class="biaoti">桃酥</p>
              <div class="xian"></div>
              <p class="neirong">优质小麦粉和新鲜鸡蛋完美比例配料，精心烤制，成就桃酥特色口感。</p>
              <div class="qingjin" @click="$router.push('/home/cpxq/'+30)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <div class="touming1">
              <p class="biaoti1">蜜麻花</p>
              <div class="xian1"></div>
              <p class="neirong1">精选优质高质面粉原料，传统工艺制作，经典传统三种口味，鲜香可口，唇齿留香，回味无穷。</p>
              <div class="qingjin1" @click="$router.push('/home/cpxq/'+20)">
                <a>请进</a>
              </div>
            </div>
            <img class="logo1" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian1" src="../../assets/img_chanpin/xxspcp2.jpg" alt="">
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/xxspcp3.jpg" alt="">
            <div class="touming">
              <p class="biaoti">拿破仑</p>
              <div class="xian"></div>
              <p class="neirong">优质高质面粉、新鲜鸡蛋、层层奶油，加上薄脆饼干，高温烘焙而成。带有西式甜点的独特搭配，入口松软奶香四...</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+25)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <div class="touming1">
              <p class="biaoti1">蛋黄酥</p>
              <div class="xian1"></div>
              <p class="neirong1">甄选新鲜、健康、优质的好原料，搭配三种口味，皮层酥松，色泽美观，馅料肥而不腻。</p>
              <div class="qingjin1"  @click="$router.push('/home/cpxq/'+28)">
                <a>请进</a>
              </div>
            </div>
            <img class="logo1" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian1" src="../../assets/img_chanpin/xxspcp4.jpg" alt="">
          </li>
        </ul>
      </div>
      <!-- 节日食品 -->
      <div class="jierishipin">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/jrsp.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li>
            <img class="tupian" src="../../assets/img_chanpin/jrspcp1.jpg" alt="">
            <div class="touming">
              <p class="biaoti">苏式月饼</p>
              <p class="neirong">非遗技艺，百年传承。</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+34)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="tupian" src="../../assets/img_chanpin/jrspcp2.jpg" alt="">
            <div class="touming">
              <p class="biaoti">八月十五团圆礼</p>
              <p class="neirong">10味6饼</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+35)">
                <a>请进</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 面包主食 -->
      <div class="mianbaozhushi">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/mbzs.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/mbzscp1.jpg" alt="">
            <div class="touming">
              <p class="biaoti">手撕面包棒</p>
              <p class="neirong">色泽金黄，麦香扑鼻而来。...</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+61)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/mbzscp2.jpg" alt="">
            <div class="touming">
              <p class="biaoti">全麦谷物面包</p>
              <p class="neirong">抹茶蔓越莓、全麦谷物等多种口味随心选。</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+62)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/mbzscp3.jpg" alt="">
            <div class="touming">
              <p class="biaoti">老面包</p>
              <p class="neirong">精选新鲜的鸡蛋、优质面粉、精细白糖，采用传统工艺高温烘焙，还原小时候的.........</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+63)">
                <a>请进</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 坚果系列 -->
      <div class="jianguoxilie">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/jgxl.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/jgxlcp1.jpg" alt="">
            <div class="touming">
              <p class="biaoti">夏威夷果</p>
              <div class="xian"></div>
              <p class="neirong">精选优质果实，传统工艺制作，拒绝过度加工和添加，还原果实原香。夏威夷果开口大易剥取。入口滑嫩，奶香四...</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+68)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <div class="touming1">
              <p class="biaoti1">开心果</p>
              <div class="xian1"></div>
              <p class="neirong1">精选优质果实，传统工艺制作，拒绝过度加工和添加，还原果实原香。开心果果实疙瘩饱满，无漂白，入口醇香，...</p>
              <div class="qingjin1"  @click="$router.push('/home/cpxq/'+69)">
                <a>请进</a>
              </div>
            </div>
            <img class="logo1" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian1" src="../../assets/img_chanpin/jgxlcp2.jpg" alt="">
          </li>
          <li>
            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian" src="../../assets/img_chanpin/jgxlcp3.jpg" alt="">
            <div class="touming">
              <p class="biaoti">扁桃仁</p>
              <div class="xian"></div>
              <p class="neirong">精选优质果实，工艺制作，拒绝过度加工和添加，还原果实原香。扁桃仁颗颗入味，口感爆棚。</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+70)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <div class="touming1">
              <p class="biaoti1">巴旦木</p>
              <div class="xian1"></div>
              <p class="neirong1">精选优质果实，高端工艺制作，拒绝过度加工和添加，还原果实原香。巴旦木开口大易剥取。入口醇香四溢。</p>
              <div class="qingjin1"  @click="$router.push('/home/cpxq/'+71)">
                <a>请进</a>
              </div>
            </div>
            <img class="logo1" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
            <img class="tupian1" src="../../assets/img_chanpin/jgxlcp4.jpg" alt="">
          </li>
        </ul>
      </div>
      <!-- 速冻食品 -->
      <div class="sudongshipin">
        <div class="biaoti">
          <img src="../../assets/img_chanpin/sdsp.jpg" alt="">
          <a href="#">了解更多</a>
        </div>
        <ul class="neirong">
          <li>
            <img class="tupian" src="../../assets/img_chanpin/sdspcp1.jpg" alt="">
            <div class="touming">
              <p class="biaoti">稻香私房水饺400g</p>
              <p class="neirong">稻香私房速冻水饺精选优质食材，熬制骨汤美味鲜香。有鲅鱼水饺、海胆水饺、三文鱼水饺...</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+72)">
                <a>请进</a>
              </div>
            </div>
          </li>
          <li>
            <img class="tupian" src="../../assets/img_chanpin/sdspcp2.jpg" alt="">
            <div class="touming">
              <p class="biaoti">稻香金牌水磨汤圆400g</p>
              <p class="neirong">皮好：选用优质糯米精细研磨成糯米粉，柔韧爽滑，糯性十足；馅好：选用有计划生、醇香...</p>
              <div class="qingjin"  @click="$router.push('/home/cpxq/'+73)">
                <a>请进</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chanPinList:[],
      chanPinList3:[]
    }
  },
  methods: {
   
  },
  mounted () {

  },
};
</script>

<style lang="scss" scoped>
div {
  background-color: #FCF9F0;
  >.mbx{
    margin-left: 20px;
  }

  .dt {
    margin-top: -8px;
    width: 100%;
  }

  .conte {
    width: 1200px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 50px;
    
    // 糕点
    >.gaodian{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      justify-content: space-between;
      padding: 0;
      >li{
        width: 30%;
        position: relative;
        >.logo{
          position: absolute;
          left: 5%;
        }
        >.tupian{
          width: 100%;
          height: 100%;
        }
        >.touming{
          position: absolute;
          bottom: 0;
          background-color: rgba(0, 0, 0, .4);
          width: 100%;
          padding-bottom: 20px;
            >.biaoti{
              color: #fff;
              font-size: 22px;
              margin: 0;
              text-align: left;
              margin: 15px 0 10px 10px;
            }
            >.neirong{
              color: #fff;
              margin: 0 10px 10px 10px;
              font-size: 12px;
              text-align: left;
            }
            >.qingjin{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: relative;
              left: 85%;
              &:hover{
                background-color: red;
              }
              >a{
                cursor: pointer;
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
      }
    }
    }
    //休闲食品 
    >.xiuxianshipin{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      background-color: #F9F4E4;
      padding: 0;
      margin: 0;
      >li{
        width: 25%;
        position: relative;
        >.logo{
          position: absolute;
          left: 5%;
        }
        >.tupian{
          width: 100%;
          display: block;
        }
        >.touming{
            position: relative;
            height: 260px;
            margin-top: 0;
            background-color: #F9F4E4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
            >.biaoti{
              color: #CEAF59;
              font-size: 22px;
            }
            >.xian{
              border-top: 1px solid #CEAF59;
            }
            >.neirong{
              font-size: 12px;
              color: #CEAF59;
              text-align: left;
            }
            >.qingjin{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: absolute;
              left: 44%;
              top: -7%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
        >.logo1{
          position: absolute;
          left: 5%;
        }
        >.tupian1{
          width: 100%;
          display: block;
        }
        >.touming1{
            position: relative;
            height: 260px;
            margin-top: 0;
            background-color: #F9F4E4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
            >.biaoti1{
              color: #CEAF59;
              font-size: 22px;
            }
            >.xian1{
              border-top: 1px solid #CEAF59;
            }
            >.neirong1{
              font-size: 12px;
              color: #CEAF59;
              text-align: left;
            }
            >.qingjin1{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: absolute;
              left: 44%;
              bottom: -7%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
      }
    }
    }
    // 节日食品
    >.jierishipin{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      justify-content: space-between;
      padding: 0;
      >li{
        width: 49%;
        position: relative;
        >.tupian{
          width: 100%;
          height: 100%;
        }
        >.touming{
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: #fff;
          width: 50%;
          height: 37%;
          padding-bottom: 20px;
            >.biaoti{
              color: #B78439;
              font-size: 24px;
              margin: 0;
              margin: 15px 0 15px 10px;
            }
            >.neirong{
              color: #B78439;
              margin: 0 10px 10px 35px;
              font-size: 14px;
              text-align: left;
            }
            >.qingjin{
              width: 40px;
              height: 40px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: relative;
              left: 45%;
              top: 6%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 40px;
                font-size: 16px;
              }
            }
        }
      }
    }
    }
    // 面包主食
    >.mianbaozhushi{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      justify-content: space-between;
      padding: 0;
      >li{
        width: 30%;
        position: relative;
        >.logo{
          position: absolute;
          left: 5%;
        }
        >.tupian{
          width: 100%;
          height: 100%;
        }
        >.touming{
          position: absolute;
          bottom: 0;
          background-color: rgba(0, 0, 0, .4);
          width: 100%;
          padding-bottom: 20px;
            >.biaoti{
              color: #fff;
              font-size: 22px;
              margin: 0;
              text-align: left;
              margin: 15px 0 10px 10px;
            }
            >.neirong{
              color: #fff;
              margin: 0 10px 10px 10px;
              font-size: 12px;
              text-align: left;
            }
            >.qingjin{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: relative;
              left: 85%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
      }
    }
    }
    //坚果系列
    >.jianguoxilie{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      background-color: #F9F4E4;
      padding: 0;
      margin: 0;
      >li{
        width: 25%;
        position: relative;
        >.logo{
          position: absolute;
          left: 5%;
        }
        >.tupian{
          width: 100%;
          display: block;
        }
        >.touming{
            position: relative;
            height: 260px;
            margin-top: 0;
            background-color: #F9F4E4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
            >.biaoti{
              color: #CEAF59;
              font-size: 22px;
            }
            >.xian{
              border-top: 1px solid #CEAF59;
            }
            >.neirong{
              font-size: 12px;
              color: #CEAF59;
              text-align: left;
            }
            >.qingjin{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: absolute;
              left: 44%;
              top: -7%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
        >.logo1{
          position: absolute;
          left: 5%;
        }
        >.tupian1{
          width: 100%;
          display: block;
        }
        >.touming1{
            position: relative;
            height: 260px;
            margin-top: 0;
            background-color: #F9F4E4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
            >.biaoti1{
              color: #CEAF59;
              font-size: 22px;
            }
            >.xian1{
              border-top: 1px solid #CEAF59;
            }
            >.neirong1{
              font-size: 12px;
              color: #CEAF59;
              text-align: left;
            }
            >.qingjin1{
              width: 35px;
              height: 35px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: absolute;
              left: 44%;
              bottom: -7%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 35px;
                font-size: 12px;
              }
            }
        }
      }
    }
    }
    // 速冻食品
    >.sudongshipin{
      >.biaoti{
      background-image: url('../../assets/img_chanpin/bj1.jpg');
      background-size: 100% 100%;
      width: 100%;
      height: 100px;
      position: relative;
      margin: 15px 0;
      >img{
        position: absolute;
        top: 28px;
        left: 42%;
      }
      >a{
        text-decoration: none;
        color: #CEAF59;
        font-size: 12px;
        position: absolute;
        right: 3%;
        bottom: 30%;
        &:hover{
          color: red;
        }
      }
    }
    >.neirong{
      display: flex;
      list-style: none;
      justify-content: space-between;
      padding: 0;
      margin: 0;
      >li{
        width: 49%;
        position: relative;
        >.tupian{
          width: 100%;
          height: 100%;
        }
        >.touming{
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: #fff;
          width: 50%;
          height: 37%;
          padding-bottom: 20px;
            >.biaoti{
              color: #B78439;
              font-size: 24px;
              margin: 15px 60px;
            }
            >.neirong{
              color: #B78439;
              margin: 0 10px 10px 35px;
              font-size: 14px;
              text-align: left;
            }
            >.qingjin{
              width: 40px;
              height: 40px;
              background-color: #CEAF59;
              border-radius: 50%;
              position: relative;
              left: 45%;
              top: 6%;
              &:hover{
                background-color: red;
              }
              >a{
                text-decoration: none;
                color: #fff;
                line-height: 40px;
                font-size: 16px;
              }
            }
        }
      }
    }
    }
  }
}
</style>
